<template>
<div class="app-container calendar-list-container">
  <div id="divleftID" class="divleft">
    <div id="couponRevRateID" class="divpie">领取率</div>
    <div id="couponUseRateID" class="divpie">使用率</div>
  </div>
  <div id="divrightID" class="divright">
    <div id="integralRevRateID" class="divpie">领取率</div>
    <div id="couponSceneRateID" class="divpie">场景占比</div>
    <!-- <div id="integralUseRateID" class="divpie">使用率</div> -->
    <!-- <div id="integralSceneRateID" class="divpie">场景占比</div> -->
  </div>
  <!-- <div class="divProportion">
    <div id="amountProportionID" class="divpie">让利占比</div>
  </div> -->
</div>
</template>

<script>
import {
  getActivityCouponRevRateData,
  getActivityCouponUseRateData,
  getActivityCouponSceneRateData,
  getActivityIntegralRevRateData,
  getActivityIntegralUseRateData,
  getActivityIntegralSceneRateData,
  getActivityAmountProportionData
} from '@/api/operative/activityDetail/index'
import { mapGetters } from 'vuex'
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入饼图
require('echarts/lib/chart/pie')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data() {
    return {
      actInfo: [],
      commomOption: {
        title: {
          text: '红包领取率',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '详情',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              {
                name: '红包总数',
                value: 0
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  created: function() {
    this.actInfo = this.$route.query.actInfo
  },
  mounted: function() {
    mapGetters([
      'elements'
    ])
    this.getActivityCouponRevRate()
    this.getActivityCouponUseRate()
    this.getActivityCouponSceneRate()
    this.getActivityIntegralRevRate()
    // this.getActivityIntegralUseRate();
    // this.getActivityIntegralSceneRate();
    // this.getActivityAmountProportion();
  },
  methods: {
    getActivityCouponRevRate() {
      const data = []
      getActivityCouponRevRateData(this.actInfo)
        .then(response => {
          if (response.code === '200') {
            data.push({
              name: '红包总数',
              value: response.totalNum
            }, {
              name: '领取红包数',
              value: response.revNum
            })
          } else {
            data.push({
              name: '红包总数',
              value: 0
            })
          }
          this.commomOption.title.text = '红包领取率'
          this.commomOption.series[0].data = data
          // 基于准备好的dom，初始化echarts实例
          const couponRevRateChart = echarts.init(document.getElementById('couponRevRateID'))
          couponRevRateChart.setOption(this.commomOption)
        })
    },
    getActivityCouponUseRate() {
      const data = []
      getActivityCouponUseRateData(this.actInfo)
        .then(response => {
          if (response.code === '200') {
            data.push({
              name: '使用红包数',
              value: response.useNum
            }, {
              name: '领取红包数',
              value: response.revNum
            })
          } else {
            data.push({
              name: '领取红包数',
              value: 0
            })
          }
          this.commomOption.title.text = '红包使用率'
          this.commomOption.series[0].data = data
          const couponUseRateChart = echarts.init(document.getElementById('couponUseRateID'))
          couponUseRateChart.setOption(this.commomOption)
        })
    },
    getActivityCouponSceneRate() {
      const data = []
      getActivityCouponSceneRateData(this.actInfo)
        .then(response => {
          if (response.code === '200') {
            $.each(response.sceneCouponTemp, function(index, item) {
              data.push({
                name: item.scene,
                value: item.total
              })
            })
          } else {
            data.push({
              name: '无结果',
              value: 0
            })
          }
          this.commomOption.title.text = '红包场景占比'
          this.commomOption.series[0].data = data
          const couponSceneRateChart = echarts.init(document.getElementById('couponSceneRateID'))
          couponSceneRateChart.setOption(this.commomOption)
        })
    },
    getActivityIntegralRevRate() {
      const data = []
      getActivityIntegralRevRateData(this.actInfo)
        .then(response => {
          if (response.code === '200') {
            data.push({
              name: '领取积分数',
              value: response.revNum
            }, {
              name: '积分总数',
              value: response.totalNum
            })
          } else {
            data.push({
              name: '积分总数',
              value: 0
            })
          }
          this.commomOption.title.text = '积分领取率'
          this.commomOption.series[0].data = data
          const integralRevRateChart = echarts.init(document.getElementById('integralRevRateID'))
          integralRevRateChart.setOption(this.commomOption)
        })
    },
    getActivityIntegralUseRate() {
      const data = []
      getActivityIntegralUseRateData(this.actInfo)
        .then(response => {
          if (response.code === '200') {
            data.push({
              name: '使用积分次数',
              value: response.useNum
            }, {
              name: '领取积分次数',
              value: response.revNum
            })
          } else {
            data.push({
              name: '领取积分次数',
              value: 0
            })
          }
          this.commomOption.title.text = '积分使用率'
          this.commomOption.series[0].data = data
          const integralUseRateChart = echarts.init(document.getElementById('integralUseRateID'))
          integralUseRateChart.setOption(this.commomOption)
        })
    },
    getActivityIntegralSceneRate() {
      const data = []
      getActivityIntegralSceneRateData(this.actInfo)
        .then(response => {
          if (response.code === '200') {
            $.each(response.sceneIntegralTemp, function(index, item) {
              data.push({
                name: item.scene,
                value: item.total
              })
            })
          } else {
            data.push({
              name: '无结果',
              value: 0
            })
          }
          this.commomOption.title.text = '积分场景占比'
          this.commomOption.series[0].data = data
          const integralSceneRateChart = echarts.init(document.getElementById('integralSceneRateID'))
          integralSceneRateChart.setOption(this.commomOption)
        })
    },
    getActivityAmountProportion() {
      const data = []
      getActivityAmountProportionData(this.actInfo)
        .then(response => {
          console.log('=================')
          console.log(response)
          if (response.code === '200') {
            this.couponAmount = response.couponAmount
            this.integralAmount = response.integralAmount
            data.push({
              name: '红包让利',
              value: response.couponAmount
            }, {
              name: '积分让利',
              value: response.integralAmount
            })
          } else {
            data.push({
              name: '红包让利',
              value: 0
            }, {
              name: '积分让利',
              value: 0
            })
          }
          this.commomOption.title.text = '让利占比'
          this.commomOption.series[0].data = data
          console.log(data)
          const amountProportionChart = echarts.init(document.getElementById('amountProportionID'))
          amountProportionChart.setOption(this.commomOption)
        })
    }
  }
}

</script>

<style scoped>
label {
    margin: 0px 0px !important;
}
.divleft {
  width: 50%;
  height: auto;
  float: left;
}
.divright {
  width: 50%;
  height: auto;
  float: right;
}
.divProportion {
  width: 100%;
  height: auto;
  float: left;
}
.divpie {
  width: 100%;
  height: 400px;
}
</style>

